<!-- 视图配置 -->
<template>
  <div class="viewSet">
    <div v-if="name=='first'">
      <!-- 开关 -->
      <el-form class="form1">
        <el-form-item label="显示报警信息">
          <el-switch
            v-model="value[0]"
            @change="changeFn(0)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
        <el-form-item label="显示消息">
          <el-switch
            v-model="value[1]"
            @change="changeFn(1)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
        <el-form-item label="显示左侧菜单">
          <el-switch
            v-model="value[2]"
            @change="changeFn(2)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
        <el-form-item label="显示用户菜单">
          <el-switch
            v-model="value[3]"
            @change="changeFn(3)"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
    </div>
    <div v-if="name=='second'">
      <div class="middle">
        <div class="treeMenu">
          <el-button
            type="primary"
            class="tree_add"
            @click="addTree"
            :disabled="!node"
            size="small"
          >新增菜单</el-button>
          <vue-perfect-scrollbar class="mt-5 treeScrool">
            <el-tree
              :data="menuGroups"
              :props="defaultProps"
              @node-click="handleNodeClick"
              draggable
              ref="menuTree"
              accordion
            ></el-tree>
          </vue-perfect-scrollbar>
        </div>
        <div class="split"></div>

        <el-form class="form3">
          <el-form-item label="名称">
            <el-input v-model="form3.name"></el-input>
          </el-form-item>
          <!-- <el-form-item label="标题">
            <el-input v-model="form3.title"></el-input>
          </el-form-item>-->
          <el-form-item label>

            <el-button class="chooseBtn" v-if="!chooseDepart" @click="showTree">选择资源</el-button>
            <el-button class="closeBtn" v-else @click="chooseDepart=false">关闭</el-button>
            <div class="vx-card chooseDepart" v-show="chooseDepart">
              <VuePerfectScrollbar class="mt-5 scroll-area">
                <el-tree
                :data="resourceOptions"
                :props="defaultProps"
                @node-click="resourceNodeClick"
                ref="resourceTree"
                node-key="id"
                accordion
                :default-checked-keys="defaultChecked"
                :default-expanded-keys="defaultExpanded"
                :render-content="renderContent"
              ></el-tree>
              </VuePerfectScrollbar>
            </div>

          </el-form-item>
          <el-form-item >{{recourceValue.name}}</el-form-item>
          <el-form-item label>
            <el-popover placement="right" width="360" trigger="click" style="width:300px">
              <div
                class="wq"
                :title="item"
                v-for="(item,index) in icons"
                :key="index"
                style="display:inline-block;margin:10px 15px"
              >
                <feather-icon :icon="item" @click="iconClick(item)"></feather-icon>
              </div>
              <el-button slot="reference" type="primary" size="small">选择图标</el-button>
            </el-popover>
          </el-form-item>
          <el-form-item v-if="icon">
            <feather-icon :icon="icon"></feather-icon>
          </el-form-item>
          <el-button type="primary" class="addBtn" @click="addTreeFn" size="small" v-if="type">确定添加</el-button>
          <el-button
            type="danger"
            class="addBtn"
            @click="delNode"
            size="small"
            v-if="type!='add'"
          >删除</el-button>
        </el-form>
      </div>
    </div>
    <div v-if="name=='third'">
      <el-form class="form2">
        <div v-for="(item,index) in customResources" :key="index" class="form2_item">
          <el-form-item label="名称">
            <el-input v-model="item.name" @blur="setKey(index)"></el-input>
          </el-form-item>
          <el-form-item label="内容">
            <el-input v-model="item.value" type="textarea" :rows="2"></el-input>
          </el-form-item>
          <el-button
            type="danger"
            icon="el-icon-delete"
            circle
            class="delBtn"
            @click="deleteFn(index)"
          ></el-button>
        </div>
        <el-button type="primary" @click="addCustomResources">添加</el-button>
      </el-form>
    </div>
  </div>
</template>

<script>
import VuePerfectScrollbar from "vue-perfect-scrollbar";
export default {
  props: {
    name: {
      type: String,
    },
    rowInfo: {
      type: Object,
      default: null,
    },
  },
  data() {
    return {
      chooseDepart:false,
      defaultChecked:[],
      defaultExpanded:[],
      checkedIds:[],
      icon: "",
      nameId:'',
      icons: [
        "ServerIcon",
        "ActivityIcon",
        "TagIcon",
        "WatchIcon",
        "ZoomInIcon",
        "MonitorIcon",
        "RadioIcon",
        "VideoIcon",
        "SettingsIcon",
        "AirplayIcon",
        "CrosshairIcon",
        "ColumnsIcon",
        "EditIcon",
        "BellIcon",
        "MailIcon",
        "AlertTriangleIcon",
        "BatteryChargingIcon",
        "EyeOffIcon",
        "LinkIcon",
        "MaximizeIcon",
        "UnlockIcon",
        "ZapOffIcon",
        "ZapIcon",
        "YoutubeIcon",
        "SlidersIcon",
        "RotateCwIcon",
        "PlayCircleIcon",
        "GitPullRequestIcon",
        "DropletIcon",
        "CpuIcon"
      ],
      data: "",
      recourceValue: "",
      resourceOptions: [],
      type: null,
      node: null,
      form3: {
      },
      defaultProps: {
        children: "children",
        label: "name",
      },
      value: [true, true, true, true],
      baseResources: [
            { key: "isAlarm", name: "isAlarm", value: "1", customConfig: "0" },
            {
              key: "isMessage",
              name: "isMessage",
              value: "1",
              customConfig: "0",
            },
            {
              key: "leftbarhide",
              name: "leftbarhide",
              value: "1",
              customConfig: "0",
            },
            {
              key: "hideTopBar",
              name: "hideTopBar",
              value: "0",
              customConfig: "0",
            },
          ],
      customResources: [],
      menuGroups: [],
      viewConfigDTO: {},
    };
  },
  components: {
    VuePerfectScrollbar,
  },
  watch: {
    rowInfo(newValue, oldValue) {
      console.log('222222222222')
      if (newValue.viewConfigDTO) {
        // this.baseResources = newValue.viewConfigDTO.baseResources;
        if (!newValue.viewConfigDTO.menuGroups.length || !newValue.viewConfigDTO.menuGroups) {
          newValue.viewConfigDTO.menuGroups = [
            { name: "用户菜单", children: [], id: "menu1" },
            { name: "左侧菜单", children: [], id: "menu2" },
          ];
          // // console.log(22222222);
        }
        this.menuGroups = newValue.viewConfigDTO.menuGroups;
        this.customResources = newValue.viewConfigDTO.customResources;
        if (newValue.viewConfigDTO.baseResources[0]) 
        this.baseResources = newValue.viewConfigDTO.baseResources;
      } else {
        this.node = true;
        this.menuGroups = [
          { name: "用户菜单", children: [], id: "menu1" },
          { name: "左侧菜单", children: [], id: "menu2" },

        ]
      }
        if(!this.menuGroups[1])
          this.menuGroups = [
              { name: "用户菜单", children: [], id: "menu1" },
              { name: "左侧菜单", children: [], id: "menu2" },
            ]
      // console.log(this.menuGroups)
      if(this.menuGroups){
        this.checkedIds = []
        this.addDefauleCheckeds(this.menuGroups[1].children)
      }
      
      // // console.log(this.checkedIds)
    },
  },
  methods: {
    renderContent(h, { node }) {
      if(node.data.type == '2') node.data.children = null
      if(node.data.type == '1' || node.data.type == '2')
      return (
        <span style="margin-left:5px;">{node.data.name}</span>
      )
      
    },
    addDefauleCheckeds(value){
      if(value.length){
        value.forEach(item=>{
          if(item.id)
          this.checkedIds.push(item.id)
          if(item.children && item.children.length){
            this.addDefauleCheckeds(item.children)
          }
        })
      }

    },
    showTree(){
      this.resourceOptions = []
      this.chooseDepart = true
      this.getTree();
    },
    resourceNodeClick(data) {
      this.recourceValue = data;
      // console.log(data)
    },
    iconClick(value) {
      this.icon = value;
    },
    seeName(name){
      this.nameId = name
      // console.log('findName',this.nameId)
      this.findName(this.resourceOptions2)
    },
    findName(value){
      for(let i = 0;i<value.length;i++){
        // console.log(value[i],i)
        if(value[i].id == this.nameId){
          this.findNameValue = value[i].name
        }
        if(value[i].children && value[i].children.length){
          // console.log('gogogogogo')
          this.findName(value[i].children)
        }
      }
    },
    getTree() {
      this.$api.accessControl
        .resourceTree()
        .then((res) => {
          this.resourceOptions = res.data.data;
          this.resourceOptions2 = res.data.data
          // // console.log( res.data.data,'111')
          // this.setDisabled(res.data.data)
          // // console.log( res.data.data,'222')
          // // console.log(this.checkedIds)
          // this.disParent(res.data.data)
          // this.resourceOptions = res.data.data
          // //-----------------------------------------------------------------------------------------------
        })
        .catch(() => {});
    },
    disParent(value){
      let count = []
        for(let i = value.length-1;i>=0;i--){
          if(value[i].type == '1' && (!value[i].children || !value[i].children.length)){
            count.push(i)
          }
          if(value[i].type != '1' && value[i].type != '2')
          count.push(i)
          if( value[i].children && value[i].children.length)
          this.disParent(value[i].children)
        }
      count.forEach(item=>{
        value.splice(item,1)
      })
    },
   
    setDisabled(value){
        let count = []
      for(let i = value.length-1;i>=0;i--){
        if(this.checkedIds.length){
          if(value[i].type == '2')
          for(let j = 0;j<this.checkedIds.length;j++){
            if(this.checkedIds[j] == value[i].id){
              count.push(i)
            }
          }
        }
        if( value[i].children && value[i].children.length)
        this.setDisabled(value[i].children)
      }
        if(count.length)
        count.forEach(item=>{
          value.splice(item,1)
        })
    },
    addTree() {
      this.icon = "";
      this.type = "add";
      this.form3 = {
        name: "",
        title: "",
      };
      this.recourceValue = ''
    },
    delNode() {
      const parent = this.node.parent;
      const children = parent.data.children || parent.data;
      console.log(children)
      console.log(this.data)
      const index = children.findIndex((d) => {
       return  (d.id === this.data.id && d.name == this.data.name )
       });
      // console.log(index,'下标')
      children.splice(index, 1);
    },
    addTreeFn() {
      if(!this.form3.name)
      return this.$vs.notify({
          text: "请输入名称",
          color: "danger"
        });
      if(!this.recourceValue)
       return this.$vs.notify({
          text: "请选择资源",
          color: "danger"
        });
      if (this.recourceValue) this.form3.accessPath = this.recourceValue.data;
      this.form3.id = this.recourceValue.id;
      if (this.icon) this.form3.funcIcon = this.icon;
      this.form3.title = this.form3.name;
      if (this.type == "add") {
        if (!this.data.children) this.$set(this.data, "children", []);
        let form = {
          name:this.form3.name,
          accessPath:this.form3.accessPath,
          id:this.form3.id,
          title:this.form3.title,
          funcIcon:this.form3.funcIcon
        }
        this.data.children.push(form);
        // setTimeout(function(){ console.log(this.form3,'111')}, 3000);
        console.log(this.form3,'111')
        console.log(this.form3.name,'222')
        // console.log(this.data,'333')
      } else {
        this.data.name = this.form3.name;
        this.data.id = this.recourceValue.id;
        if (this.icon) this.data.funcIcon = this.icon;
        if (this.recourceValue) this.data.accessPath = this.recourceValue.data;
      }
      this.type = ""
      // this.clean();
    },
    clean() {
      this.icon = "";
      this.node = "";
      this.data = "";
      this.recourceValue = "";
      this.form3.name = ""
      
    },
    getParams() {
      this.viewConfig = {
        baseResources: this.baseResources,
        customResources: this.customResources,
        menuGroups: this.menuGroups,
      };
      let params = {
        viewConfig: this.viewConfig,
        userViewId: this.rowInfo.userViewId,
      };
      return params;
    },
    setChecked(value){
      if(value.id)
      this.defaultChecked.push(value.id)
      if(value.children && value.children.length)
      value.children.forEach(item=>{
        this.setChecked(item)
      })
      // // console.log(this.defaultChecked)
    },
    handleNodeClick(data, node) {
      this.defaultExpanded  = []
      if(data.id)
      this.defaultExpanded.push(data.id) 
      // console.log(this.defaultExpanded,'展开')
      this.form3 = data;
      this.node = node;
      this.data = data;
      this.type = 'edit';
      if (data.funcIcon) this.icon = data.funcIcon;
      if (!data.funcIcon) this.icon = "";
      let obj = {};
      if (data.accessPath) obj = { data: data.accessPath, id: data.id };
      if (!data.accessPath) obj = { id: data.id };
      // obj.name = data.name
      this.seeName(obj.id)
      obj.name = this.findNameValue
      // console.log(obj,'hhhhh')
      // if(data.id)  obj = {}
      this.recourceValue = obj;
      // // console.log(this.recourceValue)
      
    },
    setKey(index) {
      this.customResources[index].key = this.customResources[index].name;
    },
    deleteFn(index) {
      if (this.customResources[index]) this.customResources.splice(index, 1);
    },
    addCustomResources() {
      let obj = { key: "", name: "", value: "", customConfig: "1" };
      this.customResources.push(obj);
    },
    changeFn(value) {
      // console.log(value);
      this.value[value]
        ? (this.baseResources[value].value = "1")
        : (this.baseResources[value].value = "0");
      // console.log(this.baseResources);
    },
    getValue() {
      this.baseResources.forEach((item, index) => {
        item.value == "1"
          ? (this.value[index] = true)
          : (this.value[index] = false);
      });
    },
  },
  created() {},
  mounted() {
    this.getValue();
    this.getTree()
  },
};
</script>
<style scoped lang="scss">
@import "@/assets/scss/baseColor.scss";
.viewSet {
  .form1 {
    margin-left: 120px;
    width: 400px;
    .el-switch {
      float: right;
      margin-right: 120px;
      margin-top: 10px;
    }
  }
  .form2 {
    .form2_item,
    .el-form-item {
      display: flex;
      margin-right: 10px;
    }
    .delBtn {
      width: 40px;
      height: 40px;
    }
  }
  .middle {
    width: 580px;
    height: 400px;
    .split {
      float: left;
      width: 2px;
      height: 350px;
      margin: 30px 10px;
      // background-color: rgb(154, 167, 166);
      background-color: $mainColor;
    }
    .tree_add {
      margin-left: 100px;
      margin-top: -40px;
    }
    .treeMenu {
      margin-top: 50px;
      float: left;
      width: 200px;
      height: 300px;
    }
    .form3 {
      float: right;
      width: 300px;
      height: 300px;
      margin: 50px 20px;
      position: relative;
    }
  }
  .treeScrool {
    height: 300px;
  }
  .chooseDepart{
    width: 60%;
    position: absolute;
    right: 0;
    top: -160px;
    height: 400px;
    z-index: 1;
  }
  .chooseBtn {
  color: #fff !important;
  background-color: $mainColor;
}
.closeBtn {
  color: #fff !important;
  background-color: #f56c6c !important;
}
  /deep/.el-button--primary{
    background-color: $mainColor;
    border-color: $mainColor;
  }
  // /deep/ .el-button{
  //   background-color: $mainColor;
  //   border-color: $mainColor;
  //   color: white;
  // }
}
</style>